<template>
  <div id="grid_container">
    <ul class="grid_list" v-if="productList.length">
      <li>
        <nuxt-link
          v-for="(item, index) in productList" :key="index"
          :to="{path: '/product/' + item.product_id}">
          <p><img :src="productBaseUrl + item.product_image" alt=""></p>
          <div class="product_cnt">
            <p class="name">{{item.product_name}}</p>
            <p class="price">￥ {{item.price}}</p>
          </div>
        </nuxt-link>
      </li>
    </ul>
    <transition name="loading">
      <loading v-show="showLoading"></loading>
    </transition>
  </div>
</template>

<script>
  /* eslint-disable no-unreachable */

  import Loading from './Loading.vue'
  export default {
    asyncData () {
      try {
        return {
          showLoading: true
        }
      } catch (err) {
        console.error(err)
      }
    },
    data () {
      return {
        showLoading: false,
        productBaseUrl: 'https://s3.cn-north-1.amazonaws.com.cn/cdn.smartbuyglasses.cn/image/en/images/'
      }
    },
    components: {
      Loading
    },
    props: ['productList'],
    created () {
    },
    transition: {
      name: 'loading',
      mode: 'out-in'
    },
    methods: {
    },
    watch: {}
  }
</script>

<style lang="scss" scoped>
  @import "../assets/style/mixin";
  #grid_container {
    padding-bottom: 2.0rem;
    background: #fff;
    .grid_list {
      li {
        @include fj;
        justify-content: flex-start;
        align-items: center;
        p {
          text-align: left;
        }
        .product_cnt {
          .name {
            font-size: 0.6rem;
          }
          .price {
            font-size: 0.85rem;
            font-weight: bold;
            color: #f19124;
          }
        }
      }
    }
    .empty_data{
      @include sc(0.6rem, #666);
      text-align: center;
      line-height: 2rem;
    }
    .load_data {
      @include sc(0.6rem, #666);
      text-align: center;
      line-height: 2rem;
      text-decoration: underline;
      cursor: pointer;
    }
  }
  .loading-enter-active, .loading-leave-active {
    transition: opacity 1s
  }
  .loading-enter, .loading-leave-active {
    opacity: 0
  }
</style>
